<template>
	<view v-if="!panelVisiable" @click="panelVisiable = true"
		class="plus-btn rounded-circle position-fixed flex justify-center align-center">
		<u-icon size="60rpx" :code="'\ue727'"></u-icon>
	</view>

	<view v-else class="panel position-fixed bottom-0 p-2" :style="{ bottom: `${panelBottom}px`}">
		<input placeholder="添加任务" :focus="panelFocus" class="pb-2" @confirm="onInputConfirm"
			@keyboardheightchange="onKeyboardheightchange" :adjust-position="false" @blur="onBlur"/>
	</view>
</template>

<script>
	export default {
		name: "u-action",
		emits: ['output'],
		data() {
			return {
				panelBottom: 0,
				panelVisiable: false,
				panelFocus: false
			};
		},
		watch: {
			panelVisiable(v : boolean) {
				this.panelFocus = v
			}
		},
		methods: {
			// 现在开始，使用失焦事件监听会更准确
			onBlur() {
				this.panelBottom = 0
				this.panelFocus = false
				this.$nextTick(() => {
					this.panelVisiable = false
				})
			},
			onInputConfirm(e : InputConfirmEvent) {
				const text = e.detail.value
				const isEmpty = text.length == 0 || text.trim() == ''

				if (isEmpty) {
					return
				}

				this.$emit('output', text)
			},
			onKeyboardheightchange(e : InputKeyboardHeightChangeEvent) {
				const height = e.detail.height
				this.panelBottom = height > 0 ? height : 0
			}
		}
	}
</script>

<style>
	.plus-btn {
		width: 80rpx;
		height: 80rpx;
		right: 50rpx;
		bottom: 50rpx;
		background-color: #dfedf8;
	}

	.panel {
		width: 100%;
		height: 100rpx;
		background-color: white;
	}
</style>